<template>
  <div class="MyPay">

    <!--<div class="MyPay-Title">
			<div class="MyPay-Hr"></div>
			<div class="MyPay-Span"><span>缴费通知</span></div>
			<div class="MyPay-Hr"></div>
		</div>-->

    <div class="Index-Body" ref='scroll'>
      <div class="Index-Body-Item" v-for='item in List' @click="GoToNotice(item.chid,item.id,item.type,item.view)">
        <div class="Index-Body-Item-Icon">
          <img src="static/img/Index/notcricle.png" width="100%" />
        </div>
        <div class="Index-Body-Item-Message">
          <div class="Index-Body-Item-Message-Title">
            <div class="Index-Body-Item-Message-Title-Tips">
              <span>缴费</span>
            </div>
            <div class="Index-Body-Item-Message-Title-Time">
              {{item.publish_time}}
            </div>
          </div>
          <div class="Index-Body-Item-Message-Font">
            {{item.title}}
          </div>
          <div class="Index-Body-Item-Message-boy">
            <span>{{item.chid_name}}</span>
          </div>
        </div>
      </div>
      <!--暂无更多-->
      <div class="MoreDiv" v-if="More">
        <i class="el-icon-loading"></i>
        <span>努力加载中</span>
      </div>
      <div class="MoreDiv" v-else>
        <div class="MoreLine"></div>
        <span class="MoreSpan">暂无更多</span>
        <div class="MoreLine"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    Indicator,
    Toast
  } from 'mint-ui';
  export default {
    name: 'Index',
    data() {
      return {
        More: true,
        Scroll: true,
        page: 1,
        List: []
      }
    },
    components: {},
    created: function () {
      this.ToList(this.page);

    },
    methods: {
      // 获取数据
      ToList(page) {
        var vm = this;
        this.$ApiCom.ToList(page).then(function (res) {
          Indicator.close();
          if (res.data.errCode == 1001) {
            Indicator.open({
              text: '登陆失效...',
            });
            localStorage.clear();
            setTimeout(() => {
              Indicator.close();
              var Sid = localStorage.getItem('Sid');
              vm.$router.push({
                path: `/Login`
              })
            }, 1000);
          } else if (res.data.errCode == 1002) {
            Indicator.open({
              text: '授权失效...',
            });
            // 加密路径，回调路径
            var IndexInfo = encodeURIComponent(window.location.href);
            // 获取sessionId
            var sessionId = sessionStorage.getItem('sessionId');
            setTimeout(() => {
              Indicator.close();
              // 授权
              location.href = 'http://xyb.wujiaping.cn/parent/login/getWxInfo?redirectUri=' + IndexInfo +
                '&&sessionId=' + sessionId;
            }, 1000);
          } else if (res.data.errCode == 0) {

            if (res.data.data.list.length < 1) {
              // 判断是否还有响应数据
              vm.Scroll = false; //阻止继续加载数据
              vm.More = false; //显示暂无更多
            } else {
              // 遍历数据
              res.data.data.list.forEach(v => {
                vm.List.push(v)
              });
              vm.More = false; //显示暂无更多
              setTimeout(() => {
                vm.Scroll = true; //继续加载数据
              }, 500);

            }
          } else {
            Indicator.open({
              text: res.errMsg,
            });
            setTimeout(() => {
              Indicator.close();
              vm.$router.push({
                path: `/Index`
              })
            }, 1000);
          }
        })
      },
      //判断滚动条是否到底部
      handleScroll() {
        var Height = this.$refs.scroll.scrollHeight;
        var scrollTop = this.$refs.scroll.scrollTop + this.$refs.scroll.clientHeight + 20;
        if (scrollTop >= Height && this.Scroll) {
          // this.Scroll如果为false,代表正在读取不允许再次加载数据
          this.$refs.scroll.scrollTop = this.$refs.scroll.scrollHeight;
          document.body.scrollTop = document.body.scrollHeight;
          this.page++;
          this.Scroll = false;
          this.More = true;
          this.ToList(this.page)
        }
      },
      // 跳转
      GoToNotice(childrenid, id, type, view) {
        var obj = {
          childrenid: childrenid,
          id: id,
          type: type,
          view: view
        };
        this.$store.state.Notice = obj;
        sessionStorage.setItem('Notice', JSON.stringify(obj));
        this.$router.push({
            path: '/PayNotice',query:{childrenid:childrenid, id:id, type:type, view:view}
        });
      },
    },
    computed: {},
    mounted() {
      this.$refs.scroll.addEventListener('scroll', this.handleScroll);
    },
  }

</script>

<style scoped="scoped">
  @import url("css/MyPay.css");

</style>
